<template>
  <div class="detailBanner" @click="handleGallery">
    <div class="banner">
      <img :src="bannerImg" alt="">
    </div>
    <div class="bannerInfo">
      <div class="name">{{sightName}}</div>
    </div>
    <div class="imgNum g-clearfix">
      <div class="iconfont g-fl">&#xe662;</div>
      <div class="num g-fl">{{galleryImgs.length}}</div>
    </div>
    <fade-animation>
      <common-gallery :imgs="imgData" v-show="showGallery"></common-gallery>
    </fade-animation>
  </div>
</template>
<script type='text/babel'>
import CommonGallery from 'common/gallery/Gallery'
import FadeAnimation from 'common/fade/Fade'
export default {
  props: {
    bannerImg: String,
    sightName: String,
    galleryImgs: Array
  },
  data () {
    return {
      imgData: [
        'http://img1.qunarzz.com/sight/p55/201211/04/fbcab3e5d6479ce893835fbb.jpg_r_800x800_6360f514.jpg',
        'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_r_800x800_6edd8174.jpg'
      ],
      showGallery: false
    }
  },
  created () {},
  mounted () {},
  updated () {},
  activated () {},
  methods: {
    handleGallery () {
      this.showGallery = !this.showGallery
    }
  },
  computed: {},
  watch: {},
  components: {
    CommonGallery,
    FadeAnimation
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  .detailBanner{
    position: relative;
    .banner{
      height:0;
      overflow: hidden;
      padding-bottom: 55%;
      img{
        width:100%;
      }
    }
    .bannerInfo{
      position: absolute;
      bottom: 0;
      left: 0;
      width:100%;
      height:40px;
      box-sizing: border-box;
      padding-left:10px;
      line-height:40px;
      background: linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0.7));
      color: #fff;
    }
    .imgNum{
      position: absolute;
      bottom:45px;
      left: 10px;
      padding: 2px 10px;
      border-radius: 8px;
      color: #fff;
      background: #000;
      background: rgba(0,0,0,0.6);
      line-height:20px;
      .iconfont{
        font-size: 12px;
      }
    }
  }
</style>
